<template>
	<view class="root-box root-container root-page-top">
		<uv-navbar autoBack placeholder bgColor="transparent" :fixed="false" title="福卡订单"></uv-navbar>
		<tui-tabs :tabs="tabs" :currentTab="currentTab" @change="change" sliderBgColor="red" selectedColor="red"
			:size="24" :height="60"></tui-tabs>
		
		<view class="content">
			<view class="card-box">
				<view class="flx-default-sb ">
					<view class="fz28">预估收益</view>
					<view class="fz24">2025-06-07至2025-07-07</view>
				</view>
				<view class="flx-default-c mt-20">
					<view class="fz60 fzW">69</view>
				</view>
				
				<view class="boottom-box mt-20">
					<view class="flx-default-cc">
						<view class="fz24">未结算订单金额/单数</view>
						<view class="fz32 fzW">¥12/24</view>
					</view>
					<view class="flx-default-cc">
						<view class="fz24">已结算订单金额/单数</view>
						<view class="fz32 fzW">¥12/24</view>
					</view>
				</view>
			</view>
			
			<view class="mt-30 flx-default">
				<tui-icon custom-prefix="lishitong" name="lishitong-shourumingxi" size="30" color="#111"></tui-icon>
				<view class="fz28 fzW pl-10">明细列表</view>
			</view>
			
			<view class="loop-box">
				<view class="flx-default-sb fz28 fzW">
					<view>
						<text class="mr10">充值缴费-话费充值：50.00</text>
						<tui-tag type="danger" padding="4rpx 8rpx" size="20rpx">福卡</tui-tag>
					</view>
					<view>47.5</view>
				</view>
				<view class="flx-default-sb fz24 cgray mt-20">
					<view>20</view>
					<view class="wsp">收益 +0.08</view>
				</view>
			</view>
			
			
			
			
			
        </view>
		
	</view>

</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	
	
	import {
		navigate
	} from '@/util/tools.js';
	

	
	
	const tabValue = ref(1)
	const currentTab = ref(0)
	

	const active = ref(0)
	const keyword = ref(null)
	
	const tabs = ([{
		name: "今日"
	}, {
		name: "昨日"
	}, {
		name: "近七日"
	}, {
		name: "近30日",
	
	}, {
		name: "筛选∨"
	}])

	const onTabChange = (index) => {
		console.log("切换到：", index)
	}

	const change = async (eg = null) => {

		if (eg) {
			currentTab.value = eg.index;
		}

	}
	
	const onGoWithdraw=()=>{
		navigate('/pages-skilled/withdraw/withdraw')
	}
</script>

<style lang="scss" scoped>
	.root-box {
		
		.content {
			padding: 30rpx;
			box-sizing: border-box;

		}
	}
	
	.card-box{
		
		border-radius: 14upx;
		padding: 30upx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #f8babd, #e60b1a);
		color:#fff;
	}
	
	.boottom-box{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.loop-box{
		margin-top: 20upx;
		background-color: #fff;
		border-radius: 10upx;
		padding: 30upx;
		box-sizing: border-box;
	}
	
	
	

	
</style>